<template>
  <div class="type">
    <div
      class="item"
      v-for="(item, index) in type"
      :key="index"
      :class="{ active: index === currentIndex }"
      @click="change(item,index)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      type: [{
        name:'new',
        title:"最新",
      },{
        name:'book',
        title:"书籍",
      },{
        name:'computer',
        title: "电脑",
      },{
        name:'phone',
        title:"手机",
      },{
        name:'washing',
        title:"洗衣机",
      },{
        name:'sock',
        title:"袜子",
      },{
        name:'toothbrush',
        title:"牙刷",
      },{
        name:'other',
        title:"其他"
      } 
      ],
      currentIndex: 0
    };
  },
  methods: {
    change(item,index) {
      this.currentIndex = index;
      this.$emit('handleType',item.name)
      console.log('选择的类型是'+item.name)
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.type {
  display: flex;
  width: 100%;
  background-color: #fff;
  border-radius: 10px;
  overflow-x: scroll;
  white-space: nowrap; 
  position: sticky;
  top: 42px;
}
.item {
  flex: 1;
  border-radius: 12px;
  padding: 5px 0 5px 0;
  text-align: center;
}
.active {
  background-color: brown;
  color: white;
}
</style>
